<template>
    <div class="category">
        <van-nav-bar title="分类详情" right-text=""/>
        <div class="box">
            <van-col :span="4" class="leftbox">
                <van-sidebar :active-key="activeKey" @change="active"  >
                    <van-sidebar-item  v-for="v in classFirst" :title="v.goodsTypeName" v-model="v.goodsTypeId"  />
                </van-sidebar>
            </van-col>

            <van-row class="shopMenu">
                <h4>{{classFirst[activeKey].goodsTypeName}}</h4>
                <template  v-for="v in listMenu" >
                    <van-col span="6" class="listMenu" @click="goodId(v.goodsId)" >
                        <div>
                            <van-image round width="3rem" height="3rem" :src="'http://172.17.4.241:8887/upload/'+v.goodsImg"/>
                        </div>
                        <div class="wenzi">{{v.goodsName}}</div>
                    </van-col>
                </template>
            </van-row>
        </div>
    </div>





</template>
<script>
    export default {
        name: "category",
        methods:{
            goodId(id){
                // console.log("呵呵")
                 console.log(id)
                // this.$store.dispatch('setGoodsid',id)
                // this.$router.push('/shopList')
                this.$store.dispatch('setGoodsid',id)
                this.$router.push('/shopList')
            },






            all(){
                this.listMenu=this.classifyList   //全部数据显示
            },


            active(v){
                this.activeKey=v
                if(v==0){
                    this.$axios.post('/api/markerGoodsType/getGoodsByType?goodsTypeId='+0).then((res=>{
                        this. all();
                    }))
                }

                this.listMenu=this.classifyList.filter(item=>{
                    return item.goodsTypeId==this.classFirst[v].goodsTypeId
                })
                // console.log(this.listMenu)
                // this.classifyList.forEach(item=>{
                //     console.log(item)
                //     if(item.goodsTypeId==this.classFirst[v].goodsTypeId){
                //         this.listMenu
                //         console.log(item)
                //     }
                // })
            },
        },

        data() {
            return {
                listMenu:[],   //点击类别对应商品数组



                listArr:[],   //把商品详情给这个数组
                currIndex:0,
                activeKey: 0,
                classifyList:[],   //最大类别及商品详情数组


                classFirst:[
                    {
                        goodsTypeName:'全部商品',
                        goodsTypeId:0,
                    }
                ]

                // active: 0,
                // items: [
                //     { text: '热门' },
                //     { text: '推荐' },
                //     ],

                // hotArr:[
                //     {
                //         src:'https://img01.yzcdn.cn/vant/cat.jpeg',
                //         title:'口红',
                //         span:'8'
                //     },
                //     {
                //         src:'https://img01.yzcdn.cn/vant/cat.jpeg',
                //         title:'口红',
                //         span:'8'
                //     },
                //     {
                //         src:'https://img01.yzcdn.cn/vant/cat.jpeg',
                //         title:'口红',
                //         span:'8'
                //     },
                // {
                //     src:'https://img01.yzcdn.cn/vant/cat.jpeg',
                //     title:'口红',
                //     span:'8'
                // },
                // {
                //     src:'https://img01.yzcdn.cn/vant/cat.jpeg',
                //     title:'口红',
                //     span:'8'
                // },
                // {
                //     src:'https://img01.yzcdn.cn/vant/cat.jpeg',
                //     title:'口红',
                //     span:'8'
                // },
                // {
                //     src:'https://img01.yzcdn.cn/vant/cat.jpeg',
                //     title:'口红',
                //     span:'8'
                // },
                // {
                //     src:'https://img01.yzcdn.cn/vant/cat.jpeg',
                //     title:'口红',
                //     span:'8'
                // },
                // {
                //     src:'https://img01.yzcdn.cn/vant/cat.jpeg',
                //     title:'口红',
                //     span:'8'
                // },
                // {
                //     src:'https://img01.yzcdn.cn/vant/cat.jpeg',
                //     title:'口红',
                //     span:'8'
                // },
                // ],

            };
        },


        created() {

            this.$axios.post('/api/markerGoodsType/getGoodsByType?goodsTypeId='+0).then((res=>{
                // console.log(res);

                var list = res.data.data
                list.forEach(v=>{
                    this.classFirst.push(v)
                })
                // console.log("123")
                // console.log(this.classFirst)
                // console.log("--------")
                list.forEach(v=>{
                    this.listArr.push(v.goodsList)
                    // console.log(v.goodsList)
                    //
                })
                // console.log(this.listArr)
                // console.log(this.listArr.flat(Infinity))
                this.classifyList=this.listArr.flat(Infinity)       //flat() 多维数组"拉平",变成一维数组
                this. all();

            }))

        }
    }
</script>

<style scoped>
    h5{
        margin:10px 0 8px 0;
    }
    .box{
        height: 100%;
    }
    .leftbox{
        width: 80px;
        height:400px;
        display: flex;
    }
    .shopMenu{
        margin-left:  96px;
        /*overflow: hidden;*/
        /*margin-top: 10px;*/
    }
    .wenzi{
        margin-left: 5px;
        font-size: 13px;
        color: black;
    }
    .listMenu{
        margin: 5px 0 10px -2px;
    }








    /*.van-col--20{*/
    /*    width:33.333333%*/
    /*}*/
    /*.oneWidth{*/
    /*width: 280px;*/
    /*!*float: left;*!*/
    /*    display: flex;*/
    /*    justify-content: space-around;*/
    /*}*/
    /*.category{*/
    /*    margin-bottom: 50px;*/
    /*}*/
    /*.hot{*/
    /*    display: flex;*/
    /*    flex-wrap: wrap;*/
    /*    justify-content: space-around;*/
    /*}*/
    /*.hot>div{*/
    /*width: 50px;*/
    /*height: 100%;*/
    /*text-align: center;*/
    /*margin-top: 5px;*/
    /*font-size: 14px;*/
    /*}*/
    /*.hot>div:nth-child(3n-1){*/
    /*    margin: 0 42px;*/
    /*}*/


</style>
